<template>
    <el-container style="height: 100vh;">
        <!-- 信息栏 -->
        <el-header style="text-align: right; font-size: 12px">
            <UserNav></UserNav>
        </el-header>

        <!-- 主体部分 -->
        <el-container>
            <!-- 左侧菜单栏 -->
            <el-aside width="200px" style="background-color: rgb(246, 248, 251);">
                <el-menu router style="background-color: rgb(246, 248, 251);" :unique-opened="true">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <component :is="Setting" />
                            </el-icon>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item @click="addTab('/home/user/list', '用户管理')">用户管理</el-menu-item>
                        <el-menu-item @click="addTab('/home/role/list', '角色管理')">角色管理</el-menu-item>
                        <el-menu-item @click="addTab('/home/menu/menu', '资源管理')">资源管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <component :is="Setting" />
                            </el-icon>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="UserManage">用户管理</el-menu-item>
                        <el-menu-item index="RoleManage">角色管理</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <!-- 右侧内容栏 -->
            <el-container style="display: flex; flex-direction: column;">
                <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane v-for="tab in tabs" :key="tab.path" :label="tab.title" :name="tab.name">
                        <router-view :key="tab.path" v-if="tab.name === activeTab" />
                    </el-tab-pane>
                </el-tabs>
            </el-container>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { Setting } from '@element-plus/icons-vue';
import UserNav from './components/user/UserNav.vue';
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';

interface TabItem {
    title: string;
    name: string;
    path: string;
}

const router = useRouter();
const store = useStore();

const activeTab = ref('');
const tabs = ref<TabItem[]>([{
    title: '首页',
    path: "/home/portal/info",
    name: 'home'
}]);

onMounted(() => {
    activeTab.value = 'home';
});

watch(activeTab, (newValue) => {
    let currentTabs = tabs.value.filter((item: any) => item.name === newValue);
    if (currentTabs.length !== 0) {
        let path = currentTabs[0].path;
        router.push(path);
    }
});

const removeTab = (tab: string) => {
    if (tab === "home") return;
    tabs.value = tabs.value.filter((item: any) => item.name !== tab);
    if (tabs.value.length) {
        activeTab.value = tabs.value[0].name;
    }
};

const addTab = (path: string, title: string) => {
    const isExist = tabs.value.some((item: any) => item.path === path);
    const name = title;
    if (!isExist) {
        tabs.value.push({ title, path, name });
    }
    activeTab.value = name;
    store.commit("/use/saveTabs", tabs.value);
};

</script>

<style scoped>
.el-header {
    background-color: #1b255a;
    /* color: #333; */
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>